<template>
	<view class="content">
		<view class="top">
			<!-- <Navbar></Navbar> -->
			<view class="bg">
				<view class="_h1">火车票预订</view>
				<view class="_p">便捷购票，服务您的每一次出行</view>
			</view>
			<view class="redius">

			</view>
		</view>

		<view class="rectangle">
			<view class="rec_top">
				<view class="from" @click="onShowCitySelector" data-index='0'>
					{{cityNames}}
				</view>
				<image @click="change" src="../../static/八维票务小程序 UI 切图/PNG/2x/Icon/切换.png" mode="" />
				<view class="to" @click="onShowCitySelector" data-index='1'>
					{{cityNames1}}
				</view>
			</view>

			<view class="choosee_time">
				<!-- <u-datetime-picker :show="show" v-model="value1" mode="datetime" />
				<u-button @click="show = true">打开</u-button> -->
				2023-07-17 今天
			</view>

			<view class="btn">
				<u-button text="查询" color="orange" shape="circle"></u-button>
			</view>

			<view class="history">
				<text>{{cityNames}} - {{cityNames1}}</text>
				<text>清除历史</text>
			</view>
		</view>

		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
			<swiper-item>
				<view class="swiper-item">
					<image
						src="https://ts1.cn.mm.bing.net/th?id=OIP-C.YKoZzgmubNBxQ8j-mmoTKAHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2"
						mode="" />
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image
						src="https://ts3.cn.mm.bing.net/th?id=OIP-C.owpbNjuu23xkyc4yrX9BDQHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2"
						mode="" />
				</view>
			</swiper-item>
		</swiper>

		<view class="flash">
			<view class="flash_title">
				<view>出行快讯</view>
				<view class="more"><text>更多</text> <u-icon name="arrow-right" size="20"></u-icon></view>
			</view>

			<view class="flash_list">
				<view v-for="(item,index) in flashList" :key="index" class="flash_item">
					<view class="rank">
						{{index + 1}}
					</view>
					<view class="info">
						<view class="title">
							{{item.title}}
						</view>
						<view class="corporation_timer">
							<text>{{item.corporation}}</text>
							<text>{{item.timer}}</text>
						</view>
					</view>
					<image :src="item.img" mode=""></image>
				</view>
			</view>
		</view>

		<DaCitySelector :visible="citySelectorVisible" themeColor="#dd524d" :multiple="true" :multipleLimit="5"
			:cityValue="citySelectedValue" @confirm="handleConfirm" @close="handleClose"></DaCitySelector>
	</view>
</template>

<script setup>
	import Navbar from '../../components/Navbar/Navbar.vue'
	import {
		ref,
		reactive
	} from 'vue'
	import DaCitySelector from '@/components/da-city-selector/index.vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	// 城市选择模块
	const citySelectedValue = ref(null)
	const cityItems = ref([])
	const cityNames = ref('北京')
	const cityNames1 = ref('石家庄')
	const citySelectorVisible = ref(false)
	const cityType = ref(0)
	const type = ref(true)

	function onShowCitySelector(e) {
		// 加载已选内容
		citySelectedValue.value = cityItems.value?.map((k) => k.id)
		citySelectorVisible.value = true
		cityType.value = e.target.dataset.index
	}

	function handleConfirm(val) {
		console.log('handleConfirm ==>', val)
		console.log(cityType)

		cityItems.value = val || []

		if (cityType.value == 0) {
			cityNames.value = cityItems.value.map((k) => k.name).join('、')
		} else {
			cityNames1.value = cityItems.value.map((k) => k.name).join('、')
		}

		citySelectorVisible.value = false
	}

	function handleClose() {
		console.log('handleClose ==>')
		citySelectorVisible.value = false
	}

	// 点击交换城市
	const change = () => {
		console.log(cityNames.value, cityNames1.value)
		type.value = !type.value
		uni.setStorageSync('from', cityNames.value)
		uni.setStorageSync('to', cityNames1.value)
		cityChange()
	}

	const cityChange = () => {
		const from = uni.getStorageSync('from')
		const to = uni.getStorageSync('to')
		if (type.value === true) {
			cityNames.value = from
			cityNames1.value = to
		} else {
			cityNames.value = to
			cityNames1.value = from
		}
	}

	// 时间选择模块
	const show = ref(false)
	const value1 = ref(Number(new Date()))

	const flashList = reactive([])

	onLoad(() => {
		uni.request({
			url: 'http://127.0.0.1:9000/api/get_flash',
			method: 'GET',
			success(res) {
				console.log(res.data.res)
				flashList.push(...res.data.res)
			}
		})
	})
</script>

<style lang="scss" scoped>
	page,
	body {
		width: 100vw;
		height: 100vh;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		background-color: #efefef;

		.content {
			width: 100%;
			height: 100%;

			.top {
				.bg {
					width: 100%;
					height: 180px;
					background-color: #1BA9BA;
					padding: 20rpx;

					._h1 {
						width: 120px;
						height: 31px;
						font-family: MicrosoftYaHei;
						font-size: 24px;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0px;
						color: #ffffff;
						padding-left: 20rpx;
					}

					._p {
						width: 210px;
						height: 20px;
						font-family: MicrosoftYaHei;
						font-size: 15px;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0px;
						color: #ffffff;
						padding-left: 20rpx;
						margin-top: 50rpx;
					}
				}

				.redius {
					width: 100%;
					height: 40px;
					background-color: #1BA9BA;
					border-bottom-left-radius: 50%;
					border-bottom-right-radius: 50%;
				}
			}

			.rectangle {
				width: 94%;
				height: 254px;
				background-color: #ffffff;
				box-shadow: 0px 2px 48px 0px rgba(0, 0, 0, 0.1);
				border-radius: 10px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -80%);

				.rec_top {
					width: 85%;
					height: 50px;
					display: flex;
					border-bottom: 1px solid #ccc;
					align-items: center;
					padding: 20rpx;
					justify-content: space-between;
					text-align: center;
					margin: 0 auto;

					image {
						width: 30px;
						height: 30px;
					}
				}

				.choosee_time {
					width: 85%;
					height: 40px;
					display: flex;
					border-bottom: 1px solid #ccc;
					align-items: center;
					padding: 20rpx;
					justify-content: space-between;
					text-align: center;
					margin: 0 auto;
				}

				.btn {
					width: 90%;
					margin: 30rpx auto;
				}

				.history {
					width: 94%;
					margin: 0 auto;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}

			swiper {
				width: 94%;
				margin-top: 200px !important;
				margin: 0 auto;

				swiper-item {
					width: 100%;

					image {
						width: 100%;
					}
				}
			}

			.flash {
				width: 94%;
				background-color: #ffffff;
				box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
				border-radius: 10px;
				margin: 20px auto;

				.flash_title {
					width: 94%;
					height: 40px;
					display: flex;
					justify-content: space-between;
					padding: 20rpx;
					align-items: center;
					border-bottom: 1px solid #ccc;

					.more {
						display: flex;
					}
				}

				.flash_list {
					width: 94%;
					margin: 0 auto;

					.flash_item {
						width: 100%;
						border-bottom: 1px solid #ccc;
						display: flex;
						justify-content: space-between;
						margin-top: 20px;
						padding-bottom: 20px;

						image {
							height: 100px;
						}

						.rank {
							color: red;
							font-weight: 700;
							font-size: 30px;
						}

						.info {
							height: 100%;

							.title {
								font-size: 16px;
							}

							.corporation_timer {
								margin-top: 40px;
								display: flex;
								justify-content: space-between;
								padding-right: 10rpx;
								color: #747474;
							}
						}
					}
				}
			}
		}
	}
</style>